<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      //解构赋值

      //ES5 : 把数组里的内容通过变量获取出来
      // var arr = ["张三", "李四", "王五"];
      // var a = arr[0];
      // var b = arr[1];
      // var c = arr[2];
      // console.log(a, b, c);

      //1.ES6数组的解构
      // var arr = ["张三", "李四", "王五"];
      // var [a, b, c] = arr;
      // console.log(a, b, c);

      // var [a, b, c] = ["张三", "李四", "王五"];
      // console.log(a, b, c); //一一对应

      //2.对象的解构
      // var obj = {
      //   myname: "张三",
      //   age: 20,
      //   height: "180cm",
      // };
      // ES5
      // var myname1 = obj.myname;
      // var age1 = obj.age;
      // var height1 = obj.height;
      // console.log(myname1, age1, height1);

      //ES6
      // let { myname: data1, age: data2, height: data3 } = obj;
      // console.log(data1, data2, data3);

      //对象的简写
      //对象里如果出现键名键值一样,那么可以省略冒号和一个键值
      /*  var myname = "张三";
      var age = 20;
      var height = "200cm";
      var obj2 = {
        //myname: myname, //键名和键值一样了 省略冒号和键值
        myname,
        age,
        height,
      };
      console.log(obj2); */

      //对象解构的简写
      /* var obj2 = {
        myname: "张三",
        age: 20,
        height: "200cm",
      };
      // var { myname: myname, age: age, height: height } = obj;
      var { myname, age, height } = obj2;
      console.log(myname, age, height); */

      //函数参数解构
      // function fn({ myname, age }) {
      //   console.log(myname, age);
      // }
      // var obj = { myname: "张三", age: 20 };
      // fn(obj);
      // //实参为obj对象 在传入形参的时候就解构成{myname,age}

      //4.字符串解构
      // var str = "abcdefg";
      // let [a, b, c, d, e] = str;
      // console.log(a, b, c, d, e);

      var obj = {
        myname: "张三",
        age: 20,
        hobby: {
          one: "篮球",
          two: "足球",
        },
        arr: [1, 2, 3, 4],
      };
      // let { myname, age, hobby, arr } = obj;
      // console.log(myname, age);
      //console.log(hobby, arr); //解构出来对象和数组
      //再结构一次
      // let { one, two } = hobby;
      // let [a, b, c, d] = arr;
      // console.log(one, two, a, b, c, d);

      //一次性结构
      let {
        myname,
        age,
        hobby: { one, two },
        arr: [a, b, c, d],
      } = obj;
      console.log(myname, age, one, two, a, b, c, d);
    </script>
  </body>
</html>
